<template>
	<div id="topBarbody">
		<div id="topBarleft">
			JYeontu的博客
		</div>
		<div class="topBarmain" id="topBarmain">
			<div v-for="(item,index) in barItem" 
				 :key = "index" 
				 :class="topBarselected == index ? 'topBarselected' : ''" 
				 @click="topBarselect(index)"
				 >
				{{item.name}}
			</div>
		</div>
		<div id="topBarright">
			<input class="topBarheig" placeholder="搜索" />
			<button>查找</button>
			<span style="margin-left: 1rem;">{{username}}</span>
			<!-- <button  @click="login()" v-if="username == '未登录'">登录</button> -->
			<button  @click="logout()">退出登录</button>
		</div>
	</div>
</template>

<script>
import global_ from '../../Global.vue'
import config from '../../../config.js'
export default {
  name: 'topBar',
  props: {
    msg: String,
	selected: Number
  },
  data() {
  	return {
  		topBarselected:0,
		username:this.$root.username,
		localhost:config.localhost,
		port:config.port,
		barItem:config.adminBarItem
  	}
  },
  methods:{
	  topBarselect(i){
		  this.topBarselected = i;
		  this.$emit("tselect",i);
		  this.$router.push(this.barItem[i].router);
	  },
	  login(){
		  this.$router.push("login");
	  },
	  logout(){
		  //请求数据
		  var api='http://'+this.localhost+':'+this.port+'/logout';
		  this.$http.get(api).then((response)=>{
		  	console.log(response);
			window.localStorage.removeItem('username');
			this.$root.username= undefined;
			window.localStorage.removeItem('loginStatus');
			this.$root.loginStatus= undefined;
			// console.log('this.$root.username',this.$root.username);
			// console.log(account);
			this.$router.push('/')
			this.$router.go(0);
		  },function(err){
		  		console.log(err);
		  })
	  }
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#topBarbody{
		display: flex;
		flex-direction: row;
		min-height: 3.125rem;
		line-height: 3.125rem;
		cursor:default;
		flex-wrap: wrap;
	}
	#topBarleft{
		flex: 1;
		font-size: large;
		font-weight: bold;
	}
	#topBarright{
		flex: 1;
	}
	#topBarmain{
		display: flex;
		flex-direction: row;
		flex: 2;
		font-weight: bold;
	}
	#topBarmain div{
		flex: 1;
	}
	.topBarselected{
		background-color: #a7a8bd;
		border-radius: 0.625rem;
	}
	#topBarright button{
		margin-left: 0.1875rem;
	}
	.topBarheig{
		width: 7rem;
	}
	#topBarheadimg{
		margin-left: 0.3125rem;
		margin-top: 0.3125rem;
		width: 2.5rem;
		height: 2.5rem;
	}
	@media screen and (max-width:980px ) {
	 #topBarbody{
		/* background-color: red; */
	 }
	 #topBarleft{
		 display: none;
	 }
	 #topBarright{
		 display: none;
	 }
	}
</style>
